import React, { Component } from 'react';
import { NavBar, List, Swiper, Cascader, Toast, Popover } from 'antd-mobile'
import "../styles/Detail.scss"
import * as service from "../api/index"
import { AppstoreOutline, UserOutline, TransportQRcodeOutline, MoreOutline } from 'antd-mobile-icons'



class Detail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            shopid: [],
            shop: [],
            tupian: [],
            options: [{
                label: '浙江',
                value: '浙江',
                children: [
                    {
                        label: '杭州',
                        value: '杭州',
                        children: [
                            {
                                label: '西湖区',
                                value: '西湖区',
                            },
                            {
                                label: '上城区',
                                value: '上城区',
                            },
                            {
                                label: '余杭区',
                                value: '余杭区',
                                disabled: true,
                            },
                        ],
                    },
                    {
                        label: '温州',
                        value: '温州',
                        children: [
                            {
                                label: '鹿城区',
                                value: '鹿城区',
                            },
                            {
                                label: '龙湾区',
                                value: '龙湾区',
                                disabled: true,
                            },
                            {
                                label: '瓯海区',
                                value: '瓯海区',
                            },
                        ],
                    },
                    {
                        label: '宁波',
                        value: '宁波',
                        children: [
                            {
                                label: '海曙区',
                                value: '海曙区',
                            },
                            {
                                label: '江北区',
                                value: '江北区',
                            },
                            {
                                label: '镇海区',
                                value: '镇海区',
                            },
                        ],
                    },
                ],
            },
            {
                label: '安徽',
                value: '安徽',
                children: [
                    {
                        label: '合肥',
                        value: '合肥',
                        children: [
                            {
                                label: '包河区',
                                value: '包河区',
                            },
                            {
                                label: '蜀山区',
                                value: '蜀山区',
                            },
                            {
                                label: '瑶海区',
                                value: '瑶海区',
                            },
                        ],
                    },
                    {
                        label: '芜湖',
                        value: '芜湖',
                        children: [
                            {
                                label: '镜湖区',
                                value: '镜湖区',
                            },
                            {
                                label: '弋江区',
                                value: '弋江区',
                            },
                            {
                                label: '湾沚区',
                                value: '湾沚区',
                            },
                        ],
                    },
                ],
            },
            {
                label: '江苏',
                value: '江苏',
                children: [
                    {
                        label: '南京',
                        value: '南京',
                        children: [
                            {
                                label: '玄武区',
                                value: '玄武区',
                            },
                            {
                                label: '秦淮区',
                                value: '秦淮区',
                            },
                            {
                                label: '建邺区',
                                value: '建邺区',
                            },
                        ],
                    },
                    {
                        label: '苏州',
                        value: '苏州',
                        children: [
                            {
                                label: '虎丘区',
                                value: '虎丘区',
                            },
                            {
                                label: '吴中区',
                                value: '吴中区',
                            },
                            {
                                label: '相城区',
                                value: '相城区',
                            },
                        ],
                    },
                ],
            },],
            visible: false,
            cang: "收藏",
            xing: '⭐',
            num: 1,
            actions: [
                { key: '/', icon: <AppstoreOutline />, text: '首页' },
                { key: 'index/my', icon: <UserOutline />, text: '我的' },
                { icon: <TransportQRcodeOutline />, text: '分享' },
            ],
        };
    }
    async componentDidMount() {
        //商品的详情id
        const res1 = await service.shop_id(this.props.location.state.proid)
        // console.log(this.props.location.state.proid);
        this.setState({ shopid: res1.data.data })

        //猜你喜欢商品
        const res3 = await service.recommendlist()
        // console.log(res3.data.data);
        this.setState({ shop: res3.data.data })

        //解构轮播图
        var { img1, img2, img3, img4 } = this.state.shopid
        var arr = [img1, img2, img3, img4]
        this.setState({ tupian: arr }, () => {
            // console.log(this.state.tupian);
        })
    }
    shoucang(e) {
        console.log(e.target.innerText);
        if (e.target.innerText == '收藏') {
            this.setState({ cang: '已收藏', xing: '🍒' })
        } else if (e.target.innerText == '已收藏') {
            this.setState({ cang: '收藏', xing: '⭐' })
        }
    }
    //传参商品id到详情页
    shop_id(id) {
        // console.log(id);
        this.props.history.push({ pathname: '/detail', state: { proid: id } })
        this.props.history.go()//刷新页面
    }
    async cartadd() {
        // console.log(this.props.location.state.proid);
        // console.log(JSON.stringify(localStorage.getItem('userid')));
        // console.log(JSON.stringify(localStorage.getItem('token')));
        // console.log(this.state.num);
        var add = await service.cart_add({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid'), proid: this.props.location.state.proid, num: this.state.num })
        // console.log(add);


    }


    render() {
        let { originprice, sales, brand, category, proname } = this.state.shopid
        return (
            <div className='detail'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }} ><p>详情<span>
                        <Popover.Menu
                        mode='dark'
                        actions={this.state.actions}
                        placement='right-start'
                        onAction={(key) => (this.props.history.push(key.key))}
                        trigger='click'
                    >
                        <MoreOutline />
                    </Popover.Menu></span> </p></NavBar>
                </div>
                <div className="jieshao">
                    <div className="tu">
                        <Swiper autoplay loop indicator={(total, current) => (
                            <div className='zhishi'>
                                {`${current + 1} / ${total}`}
                            </div>
                        )}>
                            {
                                this.state.tupian.map((item, index) => {
                                    return (
                                        <Swiper.Item key={index}>
                                            <img src={item} alt="" />
                                        </Swiper.Item>
                                    )
                                })
                            }
                        </Swiper>
                    </div>
                    <div className="shuoming">
                        <div className="shang">
                            <h3>￥{originprice}</h3>
                            <p>销量{sales}</p>
                        </div>
                        <div className="xia">
                            <h3><span>{brand}</span><span>{category}</span>{proname}</h3>
                        </div>
                    </div>
                </div>
                <div className="song">
                    <List.Item onClick={() => {
                        this.state.visible = true
                        this.setState({ visible: this.state.visible })
                    }}>
                        <span>送至</span>
                        <Cascader
                            onConfirm={(value) => { this.setState({ citytext: value }) }}
                            options={this.state.options}
                            visible={this.state.visible}
                            onClose={() => {
                                this.state.visible = false
                                this.setState({ visible: this.state.visible })
                            }}
                        >{items => {
                            if (items.every(item => item === null)) {
                                return '陕西-西安'
                            } else {
                                return items.map(item => item?.label ?? '未选择').join('-')
                            }
                        }}
                        </Cascader>
                    </List.Item>
                </div>
                <div className="love">
                    <h2>猜你喜欢</h2>
                    <div className="xihuan">
                        {
                            this.state.shop.map((item, index) => {
                                return (
                                    <div className="box" key={index} onClick={() => { this.shop_id(item.proid) }}>
                                        <img src={item.img1} alt="" />
                                        <p>{item.proname}</p>
                                        <span>￥{item.originprice}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="btn">
                    <div className="one">
                        <span>💌</span>
                        <p>客服</p>
                    </div>
                    <div className="one">
                        <span>🚀</span>
                        <p onClick={() => {
                            // this.props.history.push('/index/shop_cart')
                            this.props.history.push({ pathname: '/index/shop_cart', state: { proid: this.props.location.state.proid, } })
                        }}>购物车</p>
                    </div>
                    <div className="one">
                        <span>{this.state.xing}</span>
                        <p onClick={(e) => { this.shoucang(e) }}>{this.state.cang}</p>
                    </div>
                    <div className="bts">
                        <span onClick={() => {
                            Toast.show({
                                content: '加入购物车成功',
                                afterClose: () => {
                                    // console.log('after')
                                },
                            })
                            this.cartadd()
                        }}>加入购物车</span>
                    </div>

                </div>
            </div>
        );
    }
}

export default Detail;
